<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
<div id="app">
    <!--        弹出提示-->

    <el-dialog title="修改信息" :visible.sync="dialogresetVisible">
        <el-form :model="newtable">
            <el-form-item label="新名称" :label-width="formLabelWidth">
                <el-input v-model="newtable.username" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="新电话" :label-width="formLabelWidth">
                <el-input v-model="newtable.tel" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="新的邮件地址" :label-width="formLabelWidth">
                <el-input v-model="newtable.email" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogresetVisible = false">取 消</el-button>
            <el-button type="primary" @click="update">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="新增信息" :visible.sync="dialogFormVisible">
        <el-form :model="user">
            <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="user.username" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="电话" :label-width="formLabelWidth">
                <el-input v-model="user.tel" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="邮件地址" :label-width="formLabelWidth">
                <el-input v-model="user.email" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
        </div>
    </el-dialog>

    <template>
        <el-table :data="tableData" style="width: 100%">

            <el-table-column label="序号" width="150">
                <template slot-scope="scope">

                    <span style="margin-left: 10px">{{scope.$index }}</span>
                </template>
            </el-table-column>

            <el-table-column label="ID" width="220">
                <template slot-scope="scope">

                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>

            <el-table-column label="电话" width="180">
                <template slot-scope="scope">

                    <span style="margin-left: 10px">{{ scope.row.tel}}</span>
                </template>
            </el-table-column>


            <el-table-column label="邮件" width="180">
                <template slot-scope="scope">

                    <span style="margin-left: 10px">{{ scope.row.email }}</span>
                </template>
            </el-table-column>


            <el-table-column label="姓名" width="180">
                <template slot-scope="scope">

                    <span style="margin-left: 10px">{{ scope.row.username }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot="header" slot-scope="scope">
                    <el-button size="mini" @click="dialogFormVisible = true">新增</el-button>
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            user: {
                id: 0,
                username: 'TEST',
                tel: 'TEST',
                email: 'TEST'
            },
            formLabelWidth: '120px',
            dialogFormVisible: false,
            dialogresetVisible: false,
            form: {
                name: '',
                tel: '',
                email: ''
            },
            newtable:{
                username: '王小虎',
                tel: '145143141',
                email: "11231234123"
            },

            tableData: [{
                id: '1',
                username: '王小虎',
                tel: '145143141',
                email: "11231234123"
            }],
        },
        created() {
            var that = this
            console.log('Vue 初始化完成 created')
            this.pushdata()
            this.getBlob();
        },
        methods: {

            getBlob() {
                var that=this
                axios.post('/blog/getAll').then(function (response) {
                    console.log(response);
                })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            handleEdit(index, row) {
                console.log(index, row);
                this.newtable={
                    id:row.id,
                    username: row.username,
                    email: row.email,
                    tel: row.tel
                }
                this.dialogresetVisible=true
            },
            handleDelete(index, row) {
                var that=this
                console.log(index, row);
                axios.post('/delete', {
                    id:row.id
                }).then(function (response) {
                    console.log(response);
                    that.$message({
                        message: '删除成功!',
                        type: 'success'
                    });
                    that.pushdata()
                })
                    .catch(function (error) {
                        console.log(error);
                        that.$message({
                            message: '添加失败'
                        });
                    });
            },
            open1() {
                this.$message({
                    message: '添加成功!',
                    type: 'success'
                });
            },
            open2() {
                this.$message({
                    message: '添加失败'
                });
            },

            pushdata(){
                var that=this
                axios.get('/users')
                    .then(function (response) {
                        console.log(response.data);
                        that.tableData = response.data.data
                    })
                    .catch(function (error) {
                        console.log(error);
                        that.$message({
                            message: '获取失败'
                        });
                    });

            },

            update(){
                var that = this

                axios.post('/update', {
                    id:that.newtable.id,
                    username: that.newtable.username,
                    tel: that.newtable.tel,
                    email: that.newtable.email
                }).then(function (response) {
                    console.log(response);
                    that.dialogresetVisible = false
                    that.pushdata()
                    that.$message({
                        message: '修改成功!',
                        type: 'success'
                    });

                })
                    .catch(function (error) {
                        console.log(error);



                    });
            },
            add() {

                var that = this

                axios.post('/add', {
                    username: that.user.username,
                    tel: that.user.tel,
                    email: that.user.email
                }).then(function (response) {
                    console.log(response);
                    that.dialogFormVisible = false
                    that.pushdata()
                    that.open1();
                })
                    .catch(function (error) {
                        console.log(error);
                        that.open2();
                    });


            }
        },


    })
</script>

</html>